<template>
  <div class="mt-[24px] notify_container">
    <div class="item">
      <span class="name">Mailing Management</span>
      <div class="line mb-[16px]" />
      <el-switch
        :active-value="1"
        :inactive-value="0"
        style="--el-switch-on-color: #52c41a; --el-switch-off-color: #dcdfe6"
        v-model="setting.email_notification"
        @change="newSetting" />
      <span class="des">
        I would receive marketing, discount and product update emails from Nexbie
      </span>
    </div>
    <div class="item mt-[24px]">
      <span class="name">Inbox Notifcations</span>
      <div class="line mb-[16px]" />
      <div v-for="(item, index) in list" :class="index < list.length - 1 && 'switch_item'">
        <el-switch
          :active-value="1"
          :inactive-value="0"
          @change="changeSetting(item)"
          style="--el-switch-on-color: #52c41a; --el-switch-off-color: #dcdfe6"
          v-model="setting[item.key]" />
        <span class="des operationTitle">{{ item.name }}</span>
        <div v-for="cItem in item.child" class="mt-[12px]">
          <el-switch
            @change="newSetting"
            class="ml-[24px]"
            :active-value="1"
            :inactive-value="0"
            style="--el-switch-on-color: #52c41a; --el-switch-off-color: #dcdfe6"
            v-model="setting[cItem.key]" />
          <span class="des">{{ cItem.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch, reactive } from 'vue';
  import { UserAPI } from '@/api/user';

  const setting = reactive<any>({
    email_notification: 0,
    community_post: 0,
    community_post_like: 0,
    community_post_comment: 0,
    arcade: 0,
    arcade_like: 0,
    arcade_comment: 0,
    arcade_boots: 0,
  });
  watch(
    () => setting,
    (newVal: any, oldVal: any) => {
      const {
        email_notification,
        community_post,
        community_post_like,
        community_post_comment,
        arcade,
        arcade_like,
        arcade_comment,
        arcade_boots,
      } = newVal;
      setting.community_post = community_post_like && community_post_comment;
      setting.arcade = arcade_like && arcade_comment && arcade_boots;
    },
    { deep: true }
  );

  const list = ref<any>([
    {
      name: 'Community Post',
      key: 'community_post',
      child: [
        { name: 'Notify me with likes received', key: 'community_post_like' },
        {
          name: 'Notify me with comments received',
          key: 'community_post_comment',
        },
      ],
    },
    {
      name: 'Arcade',
      key: 'arcade',
      child: [
        { name: 'Notify me with likes received', key: 'arcade_like' },
        {
          name: 'Notify me with comments received',
          key: 'arcade_comment',
        },
        {
          name: 'Notify me when boosts received',
          key: 'arcade_boots',
        },
      ],
    },
  ]);

  onMounted(() => {
    getSetting();
  });

  const newSetting = async () => {
    const params = { ...setting };
    await UserAPI.updateUserSetting(params);
  };

  const getSetting = async () => {
    const {
      email_notification,
      community_post,
      community_post_like,
      community_post_comment,
      arcade,
      arcade_like,
      arcade_comment,
      arcade_boots,
    } = (await UserAPI.getUserSetting())?.notification || {};
    setting.email_notification = email_notification;
    setting.community_post = community_post;
    setting.community_post_like = community_post_like;
    setting.community_post_comment = community_post_comment;
    setting.arcade = arcade;
    setting.arcade_like = arcade_like;
    setting.arcade_comment = arcade_comment;
    setting.arcade_boots = arcade_boots;
  };

  const changeSetting = (itemSet: any) => {
    itemSet.child.forEach((item: any) => {
      setting[item.key] = setting[itemSet.key];
    });
    newSetting();
  };
</script>

<style scoped lang="scss">
  .notify_container {
    .switch_item {
      border-bottom: 1px solid #e1e2e3;
      padding-bottom: 16px;
      margin-bottom: 16px;
    }
    .item {
      border-radius: 8px;
      border: 1px solid var(---3, #e1e2e3);
      padding: 24px 24px 20px 24px;
    }
    .des {
      color: var(---6, #7a7a7a);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      margin-left: 16px;
    }
    .operationTitle {
      color: var(---9, #222);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .name {
      color: var(---9, #222);

      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .line {
      margin-top: 16px;
      background: #e1e2e3;
      width: 100%;
      height: 1px;
    }
  }
</style>
